<template>
  <div>
    <el-card>
      <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
        <el-tab-pane v-for='(item,index) in tabList' :key='index' :label='item.type_name' :name='item.id' />
      </el-tabs>
      <el-form ref='form' :model='form' label-width='80px' size='mini'>
        <div class='formtop'>
          <el-form-item
            label='起始日期'
            prop='start_time'
            label-width='auto'
            :rules="[
              { required: true, message: '起始日期不能为空'}
            ]"
          >
            <el-date-picker
              v-model='form.start_time'
              type='datetime'
              value-format='yyyy-MM-dd HH:mm:ss'
              placeholder='选择日期'
              style='width: 100%;'
            />
          </el-form-item>
          <el-form-item
            label='截止日期'
            prop='end_time'
            label-width='auto'
            :rules="[
              { required: true, message: '截止日期不能为空'}
            ]"
          >
            <!-- value-format="yyyy-MM-dd" -->
            <el-date-picker
              v-model='form.end_time'
              type='datetime'
              placeholder='选择日期'
              style='width: 100%;'
              value-format='yyyy-MM-dd HH:mm:ss'
            />
          </el-form-item>
          <!--      <el-form-item v-if="activeName!='second'" label="">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="三相电流不平衡度" value="shanghai" />
              <el-option label="三相电压不平衡度" value="beijing" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type='primary' @click='getChartData'>查询</el-button>
          </el-form-item>
        </div>
        <!--      <div v-if="form.resource ==='自定义'" class="formtop">
          <el-form-item label="起始日期">
            <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="截止日期">
            <el-date-picker v-model="form.end_time" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </div> -->
      </el-form>
      <el-divider />
      <div id='energyRanking' />
      <el-divider />
      <el-table
        :data='tableData'
        border
        style='width: 100%'
      >
        <el-table-column
          prop='table_name'
          label='采集因子'
          width='180'
        />
        <el-table-column
          prop='max'
          label='最大值'
          width='180'
        />
        <el-table-column
          prop='max_time'
          label='最大时间'
          width='180'
        />
        <el-table-column
          prop='min'
          label='最小值'
          width='180'
        />
        <el-table-column
          prop='min_time'
          label='最小时间'
          width='180'
        />
        <el-table-column
          prop='average'
          label='平均值'
        />
      </el-table>
    </el-card>

  </div>
</template>
<script>
import * as echarts from 'echarts'
import commMix from './commonMix.js'
import { getChartData, getTopparameter } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      tabList: [],
      options: [{
        value: '选项1',
        label: '黄金糕',
      }, {
        value: '选项2',
        label: '双皮奶',
      }, {
        value: '选项3',
        label: '蚵仔煎',
      }, {
        value: '选项4',
        label: '龙须面',
      }, {
        value: '选项5',
        label: '北京烤鸭',
      }],
      form: {
        monitor_id: '',
        start_time: '',
        end_time: '',
        type_id: '',
      },
      value2: [],
      dropDownValue: '',
      optionsMetaAll: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      optionsMetaShow: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      valueMeta: [],
      input3: '',
      activeName: '',
      tableData: [],
      nowTree: {},
    }
  },
  watch: {
    activeName(newval, oldval) {
      this.getChartData()
    },
    choseData: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.nowTree = newV
        this.form.monitor_id = newV.id
        this.form.end_time = this.getNowTime('three')
        this.form.start_time = this.getNowTime('second')
        this.getChartData()
      },
    },
  },
  mounted() {
    // this.setEnergyRanking()
    this.getTopparameter()
  },
  methods: {
    getChartData() {
      console.log(123)
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.form.type_id = this.activeName
          // this.form.type_id = 6
          getChartData(this.form).then((res) => {
            console.log(res.data)
            this.setEnergyRanking(res.data)
            this.tableData = res.data.tableData
          })
          // getPowerContrast(this.form).then((res) => {
          //   console.log(res)
          //   this.echartsData = res.data
          //   this.setDataAnalysis()
          //   this.setTypeStatistics()
          //   this.setGradeStatistics()
          // })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getTopparameter() {
      getTopparameter().then((res) => {
        console.log(res)
        this.tabList = res.data.data
        this.activeName = this.tabList[0].id
      })
    },
    dropDownSearch() {
      var _this = this
      _this.valueMeta = []
      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
    },
    filterSearch(item) {
      return item.includes(this.dropDownValue)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    setEnergyRanking(data) {
      // var height = window.getComputedStyle(document.querySelector('.min_box')).height
      // document.getElementById('dataAnalysis').style.height = height.split('px')[0] / 2 + 'px'
      echarts.dispose(document.getElementById('energyRanking'))

      var myChart = echarts.init(document.getElementById('energyRanking'))
      var seriesArr = []
      for (var i = 0; i < data.series.length; i++) {
        seriesArr.push({
          data: data.series[i].data,
          type: 'line',
          name: data.series[i].name,
          showBackground: true,
          barWidth: 20,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        })
      }
      // 绘制图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: data.xData,
        },
        yAxis: {
          type: 'value',
          name: '单位（A）',
        },
        legend: {
          data: data.legend,
          itemGap: 5,
        },
        series: seriesArr,
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50,
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 50,
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #EDF1F8 !important;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#energyRanking {
  width: 100%;
  height: 40vh;
}

.bottom_box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > div {
    width: 45%;
    height: 34vh;
  }
}

::v-deep .is-required {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

</style>
